<template>
    <div>
		<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
			<el-form-item label="序号" prop="id">
				<el-input disabled v-model="form.id"></el-input>
			</el-form-item>
			<el-form-item label="领用编号" prop="receipt_id">
				<el-input disabled v-model="form.receipt_id"></el-input>
			</el-form-item>
			<el-form-item label="样品编号" prop="sample_id">
				<el-input disabled v-model.number="form.sample_id"></el-input>
			</el-form-item>
			<el-form-item label-width="120px" label="领用分装样品？">
			 	<el-switch disabled v-model="form.dflag" active-text="是" inactive-text="否" />	
			</el-form-item>
			<template v-if="form.dflag===false">
				<el-row class="mgb20">
					<el-col :span="7">
						<el-form-item label="原始库存量" prop="current_amount">
							<el-input disabled v-model.number="form.current_amount"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="7">
						<el-form-item label="原始规格" prop="size">
							<el-input disabled v-model="form.size"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="领用数量" prop="receipt_amount">
							<el-input-number v-model="form.receipt_amount" :precision="2" :step="0.5" min='0' :max='form.current_amount'></el-input-number>
						</el-form-item>
					</el-col>
				</el-row>
			</template>
			<template v-if="form.dflag===true">
				<el-row class="mgb20">
					<el-col :span="7">
						<el-form-item label="分装库存量" prop="disp_amount">
							<el-input disabled v-model.number="form.disp_amount"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="7">
						<el-form-item label="分装规格" prop="disp_size">
							<el-input disabled v-model="form.disp_size"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item label="领用数量" prop="receipt_amount">
							<el-input-number v-model="form.receipt_amount" :precision="2" :step="0.5" min='0' :max='form.disp_amount'></el-input-number>
						</el-form-item>
					</el-col>
				</el-row>
			</template>
			<el-form-item label="领用目的" prop="reason">
				<el-input v-model="form.reason" type="textarea"></el-input>
			</el-form-item>
			<el-form-item label="项目号" prop="project_id">
				<el-input disabled v-model="form.project_id"></el-input>
			</el-form-item>
			<el-form-item label="储存位置" prop="locale">
				<el-input v-model="form.locale"></el-input>
			</el-form-item>
			<el-form-item label="检测项目" prop="service">
				<!-- <el-input v-model="form.service"></el-input> -->
			  	<el-select v-model="form.service" placeholder="请选择项目">
					<el-option v-for="ser in service" 
						:key="ser.id" 
						:label="ser.service_id+':'+ser.service_name" 
						:value="ser.service_id+':'+ser.service_name" 
					/>
				</el-select>
			</el-form-item>
			<el-form-item label="备注" prop="extra_info">
				<el-input v-model="form.extra_info" type="textarea"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="saveEdit(formRef)" >重新提交</el-button>
				<el-button type="warning" @click="onReset(formRef)" >重 置</el-button>
			</el-form-item>
		</el-form>
    </div>
</template>
<script setup lang="ts">
import { ElMessage, FormInstance, FormRules, UploadProps } from 'element-plus'
import useService from '../../../hooks/Service/useService'
import useReceipt from '../../../hooks/Receipt/useReceipt'
import { onMounted, ref } from 'vue'

const { getService } = useService()
const service=ref()
onMounted(()=>{
	getService().then(res=>{service.value=res.data})
})

// const defaultData = {
// 	id: '',
// 	sample_id: '',
// 	current_amount: 0,
// 	receipt_amount: 0,
// 	size: '',
// 	reason: '',
// 	project_id: '',
// 	locale: '',
// 	service: '',
// 	extra_info: '',
// 	dflag:false
// }

// const form = ref({ ...(props.edit ? props.data : defaultData) });
const props = defineProps({
	data: {
		type: Object,
		required: true
	},
	edit: {
		type: Boolean,
		required: true
	},
	closeDialog: {
		type:Function,
		required: true
	}
});
const form = ref(props.data)
if(form.value.dflag === 0){
	form.value.dflag = false
}else if(form.value.dflag === 1){
	form.value.dflag = true
}

const rules: FormRules = {
	id: [{ required: true, message: '编号', trigger: 'blur' }],
	sample_id: [{ required: true, message: '样品编号不能为空！', trigger: 'blur' }],
	receipt_id: [{ required: true, message: '领用编号不能为空！', trigger: 'blur' }],
	current_amount: [{ required: true, message: '原始库存量', trigger: 'blur' }],
	disp_amount: [{ required: true, message: '分装库存量', trigger: 'blur' }],
	receipt_amount: [{ required: true, message: '领用量', trigger: 'blur' }],
	reason: [{ required: true, message: '领用目的不能空！', trigger: 'blur' }],
	project_id: [{ required: true, message: '项目编号不能为空！', trigger: 'blur' }],
	service: [{ required: true, message: '检测项目不能为空！', trigger: 'blur' }],
	locale: [{ required: true, message: '储存位置不能为空！', trigger: 'blur' }],
	extra_info: [{ required: true, message: '备注', trigger: 'blur' }],
};

const { postReceiptRecheck } = useReceipt()
const formRef = ref<FormInstance>();
const saveEdit = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate(valid => {
		if (!valid) return false;
		postReceiptRecheck(form.value,"receipt_recheck").then( res => {
			if(res.data === 202){
				props.closeDialog()
				ElMessage.success('保存成功！');
			}
		})
		// props.closeDialog()
		// ElMessage.success('保存成功！');
	});
};

const onReset = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
};

</script>

<style scoped>
.el-input-number {
	width: 200px;
}
.el-row {
	margin-bottom: 4px
}
</style>
